<!-- 耗材支出指标 -->
<template>
  <div class="ctn-box ctn-box-3">
    <div class="ctn-box-title">{{params?.monthParams}}月耗材支出(45天月结供应商)</div>
    <div class="ctn-box-base">
      <div class="c-item" v-for="d in dataInfo">
        <div class="c-item-title">
          <span>{{ d?.name }}</span>
          <div :class="['sp1 ',d?.icon]">{{d?.ratio ?? '--'}}%</div>
        </div>
        <div class="c-item-ctn">
          <el-progress :percentage="d.cpyPercentage" :show-text="false"/>
          <span class="tag">{{d?.amout ?? '--'}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {IBase} from "@/api/interface/base";
import {caleCount, caleData} from "@/utils/baseCfg";
import {getConsumableExpensesMonthApi} from "@/api/modules/base";

defineOptions({
  name: 'consumablesView'
})

const params = defineProps({
  monthParams: {
    type: String,
    default: ''
  }
})
let dataInfo = ref([])
// 获取后端接口
const getData = async () => {
  dataInfo.value = []
  const paramsP = reactive<IBase.Params>({
    month: parseInt(params.monthParams?.split('-')[1]),
    year: params.monthParams?.split('-')[0]
  })
  const {data} = await getConsumableExpensesMonthApi(paramsP)
  if (Object.keys(data).length > 0){
    Object.keys(data).forEach(d=>{
      dataInfo.value.push({
        name: d,
        ratio: data[d]?.ratio?.toFixed(2),
        amout: caleData(data[d]?.currentMonthAmount),
        cpyPercentage: 100,
        icon: caleCount(data[d]?.ratio?.toFixed(2)) ? 'i-up' : 'i-down'
      })
    })
  }
}
watch(()=>params.monthParams,()=>{
  getData()
})

onMounted(()=>{
  getData()
})
</script>

<style lang="scss" scoped>
.ctn-box-base{
  padding: 3px 11px;
  overflow: auto;
  .c-item{
    .c-item-title{
      height: 33px;
      display: flex;
      justify-content: space-between;
      font-size: 16px;
      align-items: center;
      .sp1{
        position: relative;
        width: 70px;
        height: 100%;
        line-height: 45px;
        font-family: din-bold;
        font-size: 14px;
        text-indent: 15px;
        text-align: right;
        &:before{
          position: absolute;
          top: 0;
          left: 0;
          content: "";
          width: 14px;
          height: 100%;
        }
        &.i-up{
          &:before{
            background: url("@/assets/icons/up.png") center/100% 14px no-repeat;
          }
        }
        &.i-down{
          &:before{
            background: url("@/assets/icons/down.png") center/100% 14px no-repeat;
          }
        }
      }
    }
    .c-item-ctn{
      height: 31px;
      background: url("@/assets/icons/consumables/c-item-ctn-bg.png") center/100% 100% no-repeat;
      padding: 13px 3px;
      position: relative;
      .tag{
        position: absolute;
        display: block;
        top: 0;
        height: 31px;
        line-height: 41px;
        right: 5px;
        font-size: 16px;
        color: #00F3FD;
        font-family: din-bold;
      }
      :deep(.el-progress){
        max-width: 78%;
        .el-progress-bar__outer{
          background-color: rgba(8, 98, 170, 1);
          .el-progress-bar__inner{
            background: linear-gradient(90deg, rgba(8, 98, 170, 1) 0%, rgba(0, 246, 255, 1) 100%);
          }
        }
      }
    }
  }
}
</style>
